<template>
  <!-- 水印层容器 -->
  <div class="watermark-layer">
    <div
      v-for="(watermark, index) in watermarks" 
      :key="index" 
      class="watermark" 
      :style="watermark.style"
    >
      {{ watermark.text }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

import useCounter from '../../stores/pinia'
import { parseJwt } from '../../stores/pinia';


const counterStore = useCounter()
const user =ref({
  name:'',
  account:''
})

if(counterStore.jwt){
  user.value = parseJwt(counterStore.jwt)
  // console.log(user.value)
}else{
  router.push('/')
}


// 定义响应式变量watermarks用于存储所有水印对象
const watermarks = ref([]);

// 生成水印的方法
const generateWatermarks = () => {
  // 获取视窗的宽度和高度
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  const text = user.value.account + user.value.name; // 设置水印文字
  const rowCount = Math.ceil(viewportHeight / 100) + 1; // 根据视窗高度计算需要多少行水印
  const colCount = 40; // 每行放置的水印数量
  const lineHeight = 100; // 行高
  const lineSpacing = 150; // 水印间的水平间距

  // 循环创建水印
  for (let row = 0; row < rowCount; row++) {
    for (let col = 0; col < colCount; col++) {
      const x = (col * (lineSpacing + lineHeight / 4)) - (row * lineSpacing); // 计算水平位置
      const y = row * lineHeight; // 计算垂直位置

      // 确保水印位于视窗可视区域内
      if (x >= 0 && x <= viewportWidth && y >= 0 && y <= viewportHeight) {
        watermarks.value.push({
          text: text, // 水印文字
          style: {
            top: `${y}px`, // 设置垂直位置
            left: `${x}px`, // 设置水平位置
            transform: `rotate(-45deg)` // 设置旋转角度以达到斜线效果
          }
        });
      }
    }
  }
};

// 当窗口尺寸改变时更新水印
const handleResize = () => {
  watermarks.value = []; // 清空现有水印
  generateWatermarks(); // 重新生成水印
};

// 当页面滚动时更新水印
const handleScroll = () => {
  watermarks.value = []; // 清空现有水印
  generateWatermarks(); // 重新生成水印
};

// 页面加载完成后执行
onMounted(() => {
  window.addEventListener('resize', handleResize); // 添加窗口尺寸变化监听器
  window.addEventListener('scroll', handleScroll); // 添加滚动事件监听器
  generateWatermarks(); // 初次生成水印
});

// 组件卸载前清理监听器
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>

.watermark-layer {
  width: 100%;
  height: 100%;
  position: fixed;
  /* position: relative; */
  /* position: absolute; */
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  /* background-color: violet; */
  bottom: 0;
  pointer-events: none; /* 禁用水印层的鼠标事件，确保用户能与页面其他元素交互 */
  z-index: 9999;
}

.watermark {
  /* width: 100%;
  height: 100%; */
  position: absolute;
  color: rgba(149, 149, 158, 0.397);
  font-size: 20px;
  opacity: 0.5; /* 使用CSS变量设置透明度 */
  user-select: none; /* 防止水印文本被选中 */
  white-space: nowrap; /* 防止文本换行 */
  /* background-color: yellow; */
}
</style>